<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blur Image Hover Effects</title>
  <style>
    *{margin: 0; padding: 0; box-sizing: border-box;}
    section{
      height: 100vh;
    }
    .layer2{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: url("wallhaven-yjmpod.jpg");
      background-position: center;
      transition: 3s;
    }
    .layer1{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 450px;
      background-image: url("wallhaven-yjmpod.jpg");
      background-position: center;
      transition: 2s;
      /*background-attachment: fixed;*/
      z-index: 1;
      cursor: pointer;
    }
    .layer1:hover{
      box-shadow: 0 25px 60px rgba(0,0,0,0.8);
    }
    .layer1:hover + .layer2{
      filter: blur(10px);
    }
  </style>
</head>
<body>
  <section>
    <div class="layer1"></div>
    <div class="layer2"></div>
  </section>
</body>
</html>